﻿<div class="layui-card" id="lg-SmsList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>短信模板</div>
    <div class="layui-card-body" id="">
        <div class="lg-form-box">
            <table class="layui-hide" id="SmsList" lay-filter="SmsList"></table>
        </div>
        <div class="Edit layui-form layui-form-pane" v-show="show" style="margin: 15px; display: none;">
            <div class="layui-form-item">
                <blockquote class="layui-elem-quote layui-text">
                    <span class="layui-badge layui-bg-blue" v-for="item in sms.Params" style="margin: 2px; padding: 2px 5px;">{{item.text}}：{{item.value}}</span>
                </blockquote>
            </div> <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">短信内容</label>
                <div class="layui-input-block">
                    <textarea placeholder="" v-model="sms.Text" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
    </div>
</script>
<script>
    frame.createPage({
        mounted: function() {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        sms: {
                            Id: 0,
                            Text: "",
                            Params: []
                        },
                        show: false
                    }
                },
                computed: {

                },
                mounted: function() {
                    this.TableRender();
                },
                methods: {
                    EditSMSText: function() {
                        lg.request({
                            url: "/api/sys/apply/EditSmsTemplate",
                            method: "post",
                            data: { "Id": this.sms.Id, "Text": this.sms.Text },
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("编辑成功！", { icon: 1});
                                    page.laytable.reload();  
                                } else {
                                    layer.msg(res.msg, { icon: 2, time: 1000 })
                                }
                                this.show = false;
                                layer.closeAll('page');
                            }
                        })
                    },
                    TableRender: function() {
                        layui.use(['table', 'element', 'form'], function() {
                            var table = layui.table;
                            var form = layui.form;
                            form.render();
                            page.laytable = table.render({
                                elem: '#SmsList'
                                , url: '/api/sys/apply/GetSmsTemplateList'
                                , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                , cols: [[
                                    { type: 'checkbox', fixed: 'left', width: 60, }
                                    , {
                                        field: 'id', title: '#', width: 60, align: "center", templet: function(d) {
                                            return d.LAY_TABLE_INDEX + 1
                                        }
                                    }
                                    , { field: 'Title', title: '模板名称', minWidth: 120 }
                                    , {
                                        field: 'Text', title: '模板内容', align: "center", width: 100, templet: function(d) {
                                            return "<button class=\"layui-btn layui-btn-normal layui-btn-xs\" lay-event=\"text\" title=\"\"><i class=\"fa fa-cog\" aria-hidden=\"true\"></i> 参数</button>";
                                        }
                                    }
                                    , { field: 'TypeCode', title: '编码', width: 100, align: "center" }
                                    , { field: 'Limit', title: '频率', width: 100, align: "center" }
                                    , {
                                        field: 'IsUsing', title: '状态', width: 100, align: "center", templet: function(d) {
                                            return laySwitch.render(d.IsUsing, 'use');
                                        }
                                    }
                                ]]
                                , page: true
                            });
                            table.on('toolbar(SmsList)', function(obj) {
                                var checkStatus = table.checkStatus(obj.config.id);
                                switch (obj.event) {
                                    case 'add':

                                        break;
                                    case 'refresh':
                                        page.laytable.reload();
                                        break;
                                };
                            })
                            table.on('tool(SmsList)', function(obj) {
                                var data = obj.data;
                                switch (obj.event) {
                                    case 'use':
                                        laySwitch.do({
                                            obj: obj,
                                            key: "IsUsing",
                                            url: "/api/sys/apply/EditSMSTemplate",
                                            refresh: function() {
                                                page.laytable.reload();
                                            }
                                        })
                                        break;
                                    case 'text':
                                        page.vm.show = true;
                                        page.vm.sms.Id = data.Id;
                                        page.vm.sms.Text = data.Text;
                                        page.vm.sms.Params = JSON.parse(data.Params);
                                        layer.open({
                                            type: 1//此处以iframe举例
                                            , title: '模版修改'
                                            , area: ['500px', '400px']
                                            , maxmin: true
                                            , content: $(".Edit")
                                            , btn: ['保存', '取消'] //只是为了演示
                                            , yes: function() {
                                                page.vm.EditSMSText();
                                            }
                                            , btn2: function() {
                                                page.vm.show = false;
                                                page.vm.sms = {
                                                    Id: 0,
                                                    Text: "",
                                                    Params: []
                                                },
                                                    layer.closeAll();
                                            }
                                        });
                                        break;
                                };
                            })
                        });
                    },
                    reload: function() {
                        this.laytable.reload();
                    }
                },
                updated: function() {
                    layui.form.render();
                }
            }).mount("#lg-SmsList")
        },
    }).mount();

</script>
